<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#canvas {
				display: block;
				margin: 20px auto;
				background-color: #000;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script src="../libs/utils.js"></script>
		<script src="../components/arrow.js"></script>
		<script type="text/javascript">
			var canvas = document.querySelector('#canvas')
			var ctx = canvas.getContext('2d');

			var w = canvas.width = 500;
			var h = canvas.height = 300
			var aw = 30, // 宽
				ah = 10, // 高
				a = 0, // 加速度
				vr = 0, // 旋转角度
				vx = 0, // 初始x速度
				vy = 0; // 初始y速度
			var arrow = new Arrow({
				w: aw,
				h: ah,
				x: w / 2,
				y: h / 2
			}).render(ctx);
			
			window.addEventListener('keydown',function(e){
				switch(e.keyCode){
					case 37:
						vr = -5;
						break;
					case 39:
						vr = 5;
						break;
					case 38:
						a = 0.5
						break;
				}
				
			});
			window.addEventListener('keyup',function(e){
				vr=0
				a=0
				
			});
			(function move(){
				window.requestAnimationFrame(move)
				ctx.clearRect(0,0,w,h)
				arrow.rotation +=$C.toRad(vr)
				var angle = arrow.rotation
				var dx = Math.cos(angle) * a
				var dy = Math.sin(angle) * a
				vx+=dx;
				vy+=dy;
				vx*=0.95;
				vy*=0.95;
				arrow.x +=vx;
				arrow.y +=vy;
				arrow.render(ctx)
			})()
		</script>
	</body>
</html>
